CSS Tricks for Hero and Sticky Menu

Allright, I am not a web designer or front end developer. But from time to time, some small things do require my attention to get it done quickly. That’s why I found it’s useful to have some experience with CSS and the newer modern CSS. Yes I mean the stuff like SCSS, Styled Component, Rebass etc etc. It can quickly go crazy since the universe is so big. :-)

I need to convert one of the web front page in a framework code to use a bigger hero header and sticky menu on the top. Tried some of the react component but they don’t work very well. Eventually I dived into the magic code base behind the scene and finally get everything works properly, and one different devices.

Here is some of the good resource I found very helpful to go through the journey.

A Responsive CSS Hero Background Image with Opacity and Color Overlay that Does Not Affect Text

How TO - On Scroll Header Check out “how to create a fixed/sticky header on scroll with CSS and JavaScript”.

Thanks a lot for the very detailed explanation. I also created a codepen practice here.

Left a small issue in the codepen practice, please have some fun to fix it. Enjoy!